<template>
  <a-result
    status="404"
    :title="code"
    :sub-title="error"
    class="main"
  >
    <template #extra>
      <a-button type="primary" @click="goHome">返回首页</a-button>
    </template>
  </a-result>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

// 错误码和提示信息
const code = ref<number>(Number(route.query.code) || 500);
const error = ref("");

// 根据 code 自动更新提示
watchEffect(() => {
  if (code.value === 403) {
    error.value = "无权限操作";
  } else if (code.value === 404) {
    error.value = "URL或资源不存在";
  } else if (code.value === 429) {
    error.value = "请求次数过多，请稍后再试";
  } else {
    error.value = "系统错误";
  }
});

// 返回首页
const goHome = () => {
  router.replace("/");
};
</script>

<style scoped>
.main {
  width: auto;
  height: auto;
}
</style>
